<template>
  <div class="menu">
    <div class="menuContain">
      <div class="menuIcon" />
      <div class="menuNav">
        <div
          :class="{ menuNavItem: true, active: menuIndex === 0 }"
          @click="handleChangeMenuIndex(0,'/')"
        >
          发现音乐
          <!-- 三角形高亮 -->
          <div
            class="menuNavTriangle"
            :class="menuIndex === 0 ? 'selected' : ''"
          />
          <!-- 下拉栏导航 -->
          <div v-if="menuIndex === 0" class="discoverNav">
            <div
              class="discoverNavItem"
              @click.stop="handleChangeNavIndex(0, '/discover')"
            >
              <div
                class="discoverNavTitle"
                :class="navIndex === 0 ? 'active' : ''"
              >
                推荐
              </div>
            </div>
            <div
              class="discoverNavItem"
              @click.stop="handleChangeNavIndex(1, '/discover/toplist')"
            >
              <div
                class="discoverNavTitle"
                :class="navIndex === 1 ? 'active' : ''"
              >
                排行榜
              </div>
            </div>
            <div
              class="discoverNavItem"
              @click.stop="handleChangeNavIndex(2, '/discover/playlist')"
            >
              <div
                class="discoverNavTitle"
                :class="navIndex === 2 ? 'active' : ''"
              >
                歌单
              </div>
            </div>
            <div
              class="discoverNavItem"
              @click.stop="handleChangeNavIndex(3, '/discover/djradio')"
            >
              <div
                class="discoverNavTitle"
                :class="navIndex === 3 ? 'active' : ''"
              >
                主播电台
              </div>
            </div>
            <div
              class="discoverNavItem"
              @click.stop="handleChangeNavIndex(4, '/discover/artist')"
            >
              <div
                class="discoverNavTitle"
                :class="navIndex === 4 ? 'active' : ''"
              >
                歌手
              </div>
            </div>
            <div
              class="discoverNavItem"
              @click.stop="handleChangeNavIndex(5, '/discover/album')"
            >
              <div
                class="discoverNavTitle"
                :class="navIndex === 5 ? 'active' : ''"
              >
                新碟上架
              </div>
            </div>
            <span class="iconfont icon-shangbiao discoverNavItemIcon" />
          </div>
        </div>
        <div
          :class="{ menuNavItem: true, active: menuIndex === 1 }"
          @click="handleChangeMenuIndex(1,'/discover/friend')"
        >
          我的音乐
          <div
            class="menuNavTriangle"
            :class="menuIndex === 1 ? 'selected' : ''"
          />
        </div>
        <div
          :class="{ menuNavItem: true, active: menuIndex === 2 }"
          @click="handleChangeMenuIndex(2, '/discover/mymusic')"
        >
          朋友
          <div
            class="menuNavTriangle"
            :class="menuIndex === 2 ? 'selected' : ''"
          />
        </div>
        <div class="menuNavItem">商城</div>
        <div class="menuNavItem">音乐人</div>
        <div
          :class="{ menuNavItem: true, active: menuIndex === 5 }"
          @click="handleChangeMenuIndex(5)"
        >
          下载客户端
          <div
            class="menuNavTriangle"
            :class="menuIndex === 5 ? 'selected' : ''"
          />
        </div>
        <div class="menuHotIcon" />
      </div>
      <div class="menuSearch">
        <div class="menuSearchIcon" />
        <input class="menuInput" placeholder="音乐/视频/电台/用户" />
      </div>
      <div class="menuCenter">创作者中心</div>
      <div class="menuUser" @click="IS_TO_LOGIN(true)">
        <img class="menuUserImg" src="../assets/images/cat.jpg" />
      </div>
    </div>
    <div
      :class="
        menuIndex === 0 ? 'menuNavbackgroundBig' : 'menuNavbackgroundSmall'
      "
    ></div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  name: 'Menu',
  data() {
    return {
      // 选中菜单标签的序号
      // 0 推荐 1 排行榜 2 歌单 5 新碟上架
      menuIndex: 0,
      // 选中下拉框导航栏标签的序号
      // 0 推荐 1 排行榜 2 歌单 3 主播电台 4 歌手 5 新碟上架
      navIndex: 0
    }
  },
  components: {},
  methods: {
    ...mapMutations('playlist', ['IS_TO_LOGIN']),
    // 改变菜单栏选中标签
    handleChangeMenuIndex(index,path) {
      this.menuIndex = index
      this.$router.history.push({path})
    },
    // 改变导航栏选中标签
    handleChangeNavIndex(index, path) {
      this.navIndex = index
      this.$router.history.push({
        path
      })
    }
  }
}
</script>

<style lang="less" scoped>
.menu {
  width: 100%;
  background: #242424;
  color: white;
  .menuContain {
    display: flex;
    align-items: center;
    margin: 0 auto;
    width: 1110px;
  }
  // 下拉栏背景样式
  .menuNavbackgroundBig {
    height: calc(18px + 10px + 10px);
    width: 100%;
    background: #c20c0c;
  }
  .menuNavbackgroundSmall {
    height: 10px;
    width: 100%;
    background: #c20c0c;
  }
}
.menuIcon {
  width: 160px;
  height: 70px;
  background: url('../assets/images/topbar.png') top left no-repeat;
  cursor: pointer;
}
.menuNav {
  display: flex;
  position: relative;
  margin: 0 20px;
  .menuNavItem {
    position: relative;
    padding: 0 20px;
    height: 70px;
    line-height: 70px;
    text-align: center;
    font-size: 14px;
    color: #cccccc;
    cursor: pointer;
    &:hover {
      background: #000;
    }
    &.active {
      background: black;
    }
    // 下拉栏样式
    .discoverNav {
      display: flex;
      position: absolute;
      top: 70px;
      left: 0;
      width: 700px;
      box-sizing: border-box;
      font-size: 12px;
      .discoverNavItem {
        height: calc(18px + 10px + 10px);
        cursor: pointer;
        &:hover .discoverNavTitle {
          background: #9b0909;
          border-radius: 15px;
        }
        .discoverNavTitle {
          margin: 10px 20px;
          padding: 3px 15px;
          line-height: 12px;
          text-align: center;
          color: white;
          &.active {
            background: #9b0909;
            border-radius: 15px;
          }
        }
      }
      .discoverNavItemIcon {
        position: absolute;
        top: -20px;
        left: 260px;
        font-size: 10px;
        border-radius: 50%;
      }
    }
    // 选中菜单项样式
    .menuNavTriangle {
      display: none;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      border: 8px solid transparent;
      border-bottom-color: #c20c0c;
      &.selected {
        display: block;
      }
    }
  }
  // hot图标
  .menuHotIcon {
    position: absolute;
    right: -20px;
    top: 30%;
    width: 30px;
    height: 15px;
    background: url('../assets/images/topbar.png') -190px top no-repeat;
  }
}
// 搜索栏
.menuSearch {
  display: flex;
  margin: 0 20px 0 60px;
  background: white;
  height: 30px;
  width: 160px;
  line-height: 30px;
  border-radius: 20px;
  .menuSearchIcon {
    display: inline-block;
    height: 30px;
    width: 30px;
    background: url('../assets/images/topbar.png') left -100px no-repeat;
    color: #707070;
  }
  .menuInput {
    width: 110px;
    font-size: 12px;
    border: none;
    outline: none;
  }
}
// 创作者中心
.menuCenter {
  height: 30px;
  width: 90px;
  line-height: 30px;
  text-align: center;
  font-size: 12px;
  color: #ccc;
  border: 2px solid #4f4f4f;
  border-radius: 20px;
  cursor: pointer;
}
// 用户头像
.menuUser {
  margin-left: 20px;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  .menuUserImg {
    height: 30px;
    width: 30px;
    border-radius: 50%;
  }
}
</style>
